<template>
  <view class="shipping-address">
    <scroll-view scroll-y="true">
      <view class="list" v-for="(item, index) in memberAddresses" :key="index" @tap="setMemberAddressList(item)">
        <view>
          <image v-if="item.isDefault" :src="'member/select-my.png' | prefixOssUrl" />
          <image v-else :src="'member/not-select-my.png' | prefixOssUrl" />
        </view>
        <view>
          <view class="name">
            <view><text>{{ item.consignee }}</text><text>{{ item.mobile }}</text></view>
            <icon class="iconfont icon" @tap.stop="editAddress(item)">&#xe60a; </icon>
          </view>
          <view class="address">{{ item.fullAddress }}</view>
          <view class="default-setting">
            <view @tap.stop="defaultSettings(index)">
              <axq-checkbox activeColor="#ff2150" :checked="item.isDefault" /><text>设为默认</text>
            </view>
            <view @tap.stop="deleteAddress(item.id)">
              <icon class="iconfont icon">&#xe62d;</icon><text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="add-botton" @tap="nav('/subpackage/order/pages/purchanse/address/add')">
      <view>
        <icon class="iconfont icon">&#xeaf3;</icon>新增收货地址
      </view>
    </view>
  </view>
</template>
<script>
  import EventBus from "@/event/index";
  import axqCheckbox from "@/components/checkbox";
  import {
    model
  } from "@/model";

  const {
    Member
  } = model.collection;
  export default {
    data() {
      return {
        memberAddresses: [],
      };
    },
    components: {
      axqCheckbox,
    },
    onShow() {
      this.addressList();
    },
    computed: {
      address() {
        return (
          this.memberAddresses.find((item) => item.isDefault) ||
          this.memberAddresses[0]
        );
      },
    },
    methods: {
      async addressList() {
        let res = await Member.sendApi("addressList", {});
        if (!res.status) return;
        this.memberAddresses = this.get(res, "data", []);
        EventBus.$emit("memberAddressList", [this.address]);
      },
      async addressUpdate(data) {
        let res = await Member.sendApi("addressUpdate", {
          params: {
            type: 2,
          },
          data: {
            isDefault: data.isDefault,
            id: data.id,
          },
        });
        if (!res.status) {
          return;
        }
        this.addressList();
      },

      async addressDelete(id) {
        let res = await Member.sendApi("addressDelete", {
          params: {
            id,
          },
        });
        if (!res.status) {
          return;
        }
        this.addressList();
      },
      defaultSettings(num) {
        this.memberAddresses.forEach((item, index) => {
          item.isDefault = index === num ? (item.isDefault ? 0 : 1) : 0;
        });

        this.addressUpdate(this.memberAddresses[num]);
      },
      deleteAddress(id) {
        uni.showModal({
          cancelColor: "#999999",
          confirmColor: "#DB187C",
          content: "确认将该地址删除？",
          cancelText: "我再想想",
          success: (res) => {
            if (res.confirm) {
              this.addressDelete(id);
            }
          },
        });
      },
      editAddress(item) {
        this.nav(
          `/subpackage/order/pages/purchanse/address/add?address=${JSON.stringify(
          item
        )}`
        );
      },
      setMemberAddressList(item) {
        EventBus.$emit("memberAddressList", [item]);
        this.back();
      },
    },
  };
</script>
<style lang="less" scoped>
  page {
    .shipping-address {
      height: 100vh;
      background-color: #f7f7f7;

      scroll-view {
        height: calc(100vh - 170rpx);
      }

      view {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .list {
        align-items: stretch;
        margin-top: 30rpx;
        padding: 30rpx 26rpx 0;
        box-sizing: border-box;
        background-color: #fff;

        >view:first-child {
          position: relative;
          flex-shrink: 0;
          margin-right: 20rpx;
          width: 60rpx;

          >image {
            position: absolute;
            top: 34rpx;
            width: 100%;
            height: 60rpx;
          }
        }

        >view:last-child {
          flex-direction: column;
          width: 100%;

          >view {
            width: 100%;
          }

          .name {
            font-size: 30rpx;
            color: #333;

            text:first-child {
              max-width: 350rpx;
              font-weight: bold;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            text:last-child {
              margin-left: 20rpx;
              font-size: #666;
            }

            .icon {
              position: relative;
              margin-top: -9rpx;
              font-size: 38rpx;
              color: #999;
            }

            .icon::before {
              content: "";
              position: absolute;
              z-index: 10;
              width: 14rpx;
              height: 2rpx;
              background-color: #999;
              right: 5rpx;
              bottom: 4rpx;
            }

            .icon::after {
              content: "";
              position: absolute;
              z-index: 15;
              left: -50%;
              width: 150%;
              height: 100%;
            }
          }

          .address {
            display: -webkit-box;
            margin-top: 24rpx;
            padding-right: 52rpx;
            font-size: 28rpx;
            box-sizing: border-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .default-setting {
            position: relative;
            margin: 34rpx 0 25rpx;
            font-size: 24rpx;
            color: #999;

            >view:first-child {
              &::before {
                content: "";
                position: absolute;
                width: 24%;
                height: 180%;
              }

              /deep/ .checkbox {
                width: 30rpx;
                height: 30rpx;
                background-color: #fff;
                border-color: #888;

                .c-icon {
                  margin-left: 0;
                }
              }
            }

            text {
              margin-left: 16rpx;
            }

            .icon {
              margin-top: -14rpx;
              font-size: 36rpx;
            }
          }
        }
      }

      .add-botton {
        position: fixed;
        bottom: 40rpx;
        width: 100%;
        font-size: 32rpx;

        >view {
          justify-content: center;
          margin: 0 30rpx;
          width: 100%;
          height: 90rpx;
          color: #fff;
          background: #db187c;
          border-radius: 10rpx;
          box-sizing: border-box;
        }

        .icon {
          margin: -10rpx 3rpx 0;
        }
      }
    }
  }
</style>